<template>
  <XcDrawer ref="drawer" :title="$t('page.app.limits.title')" :width="720" @onDrawerSave="onSave">
    <Form ref="limitform" :model="limit" :label-width="0" :rules="rules">
      <FormItem prop="appname">
        <Select v-model="limit.appname" @on-change="pathAppChanged" :placeholder="$t('page.app.limits.form.appname')" :disabled="editing">
          <Option v-for="item in apps" :value="item.name" :key="item.name">
            {{ item.name }}
            <TextTooltip class="option-label" :width="300" :tip="item.remark||'-'" />
          </Option>
        </Select>
      </FormItem>
      <template v-if="limit.appname">
        <FormItem prop="path">
          <Select v-model="limit.path" :placeholder="$t('page.app.limits.form.path')" :disabled="editing">
            <Option v-for="item in apppathes" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </FormItem>
        <template v-if="limit.path">
          <FormItem>
            <Checkbox v-model="limit.before" @on-change="limit.auto=!limit.before" :disabled="!serverable">{{$t('page.app.limits.form.before')}}</Checkbox>
          </FormItem>
          <FormItem>
            <DatePicker v-model="limit.startTime" type="date" :placeholder="$t('page.app.limits.form.startTime')"></DatePicker>
            <span class="ml-5 mr-5">~</span>
            <DatePicker v-model="limit.endTime" type="date" :placeholder="$t('page.app.limits.form.endTime')"></DatePicker>
          </FormItem>

          <Divider class="divider-tiny" orientation="left" size="small">{{$t('page.app.limits.form.control')}}</Divider>
          <FormItem prop="qps">
            <InputNumber v-model="limit.qps" :min="0" :max="3000" />
            {{$t('page.app.limits.form.qps')}}
          </FormItem>
          <FormItem prop="warmup">
            <InputNumber v-model="limit.warmup" :min="1" :max="300" />
            {{$t('page.app.limits.form.warmup')}}
          </FormItem>
          <Divider class="divider-tiny" orientation="left" size="small">{{$t('page.app.limits.form.handleType')}}</Divider>
          <FormItem>
            <Checkbox v-model="limit.fastfail">{{$t('page.app.limits.form.fastfail')}}</Checkbox>
          </FormItem>
          <FormItem prop="timeout" v-if="!limit.fastfail">
            <InputNumber v-model="limit.timeout" :min="1" :max="300" />
            {{$t('page.app.limits.form.timeout')}}
          </FormItem>

          <Divider class="divider-tiny" orientation="left" size="small">{{$t('page.app.limits.form.triggerType')}}</Divider>
          <FormItem>
            <Checkbox v-model="limit.auto" :disabled="editing||!limit.before">{{$t('page.app.limits.form.triggerAuto')}}</Checkbox>
          </FormItem>
          <FormItem prop="period" v-if="!limit.auto">
            <InputNumber v-model="limit.period" :min="1" :max="300" />
            {{$t('page.app.limits.form.triggePeriod')}}
          </FormItem>
          <FormItem prop="errors" v-if="!limit.auto">
            <InputNumber v-model="limit.errors" :min="1" :max="300" />
            {{$t('page.app.limits.form.triggeErrors', [limit.period])}}
          </FormItem>
          <FormItem prop="recover" v-if="!limit.auto">
            <InputNumber v-model="limit.recover" :min="10" :max="3600" />
            {{$t('page.app.limits.form.triggeRevocer')}}
          </FormItem>

          <Divider v-if="serverable" class="divider-tiny" orientation="left" size="small">{{$t('page.app.limits.form.whites')}}</Divider>
          <FormItem v-if="serverable" prop="whiteGroupList">
            <Select v-model="limit.whiteGroupList" multiple :placeholder="$t('page.app.limits.form.whiteGroups')">
              <Option v-for="item in discovergroups" :value="item.group" :key="item.group" :label="item.group">
                {{ item.group }}
                <TextTooltip class="option-label" :width="300" :tip="item.remark||'-'" />
              </Option>
            </Select>
          </FormItem>
          <FormItem v-if="serverable" prop="whiteServiceList">
            <Select v-model="limit.whiteServiceList" multiple :placeholder="$t('page.app.limits.form.whiteServices')">
              <Option v-for="item in discoverapps" :value="item.name" :key="item.name" :label="item.name">
                {{ item.name }}
                <TextTooltip class="option-label" :width="300" :tip="item.remark||'-'" />
              </Option>
            </Select>
          </FormItem>
        </template>
      </template>
    </Form>
  </XcDrawer>
</template>

<script>
  import XcDrawer from '@/components/xcdrawer'
  import TextTooltip from '@/components/texttooltip'
  export default {
    name: "comp-applimit",
    components: { XcDrawer, TextTooltip },
    data() {
      return {
        editing: true,
        limit: {
          appname: '',
          path: '',
          before: false,
          startTime: '',
          endTime: '',
          qps: 5,
          warmup: 5,
          fastfail: false,
          timeout: 60,
          auto: true,
          period: 5,
          errors: 5,
          recover: 300,
          whiteGroupList: [],
          whiteServiceList: [],
        },
        rules: {
          appname: [{ required: true, trigger: 'blur' }],
          path: [{ required: true, trigger: 'blur' }],
        },
        apps: [], // 应用列表
        apppathes: [], // 应用地址列表
        serverable: false,
        discovergroups: [], // 分组列表
        discoverapps: [], // 服务发现者列表
      }
    },
    watch: {
      appname() {
        this.limit.path = ''
      },
      serverable() {
        if (!this.serverable) {
          this.limit.before = false
          this.limit.auto = true
        }
      }
    },
    methods: {
      show(limit) {
        this.$refs.limitform.resetFields()
        limit = limit || {}
        this.editing = !!limit.appname
        //
        this.limit.appname = limit.appname || ''
        this.limit.path = limit.path || ''
        this.limit.before = limit.before || false
        this.limit.startTime = limit.startTime || ''
        this.limit.endTime = limit.endTime || ''
        this.limit.qps = limit.qps || 0
        this.limit.warmup = limit.warmup || 5
        this.limit.fastfail = limit.fastfail || false
        this.limit.timeout = limit.timeout
        this.limit.auto = this.limit.before ? (limit.auto || false) : true
        this.limit.errors = limit.errors || 5
        this.limit.recover = limit.recover || 300
        this.limit.whiteGroupList = limit.whiteGroupList || []
        this.limit.whiteServiceList = limit.whiteServiceList || []
        this.$refs.drawer.show()
        //
        this.$md.dispatch('app_list').then(data => {
          if (data.retCode === 1) {
            this.apps = data.data || []

            if (this.editing) {
              this.pathAppChanged(this.limit.appname)
            }
          }
        })
      },
      pathAppChanged(appname) {
        this.$md.dispatch('app_limit_condition', {
          data: appname
        }).then(data => {
          if (data.retCode === 1) {
            this.serverable = data.serverable
            this.apppathes = data.data || []
            this.discovergroups = data.groups || []
            this.discoverapps = data.disovers || []
          }
        })
      },
      onSave() {
        this.$refs.limitform.validate((valid) => {
          if (valid) {
            this.$md.dispatch('app_limit_aoe', {
              data: this.limit
            }).then(data => {
              if (data.retCode === 1) {
                this.$Message.success(this.$t('submitok'))
                this.$refs.drawer.close(true)
                this.$emit('onRefresh')
              }
            })
          }
        })
      },
    }
  };
</script>
